<template>
  <div>
       <!-- 头部返回按钮 -->
       <div class="header">
          <div class="text" @click="okk">
          <i class="iconfont icon-back"></i>
          <span class="text1">
            <i class="iconfont icon-fanhui"></i>
            关联父母
            </span>
          </div>
       </div>

       <!-- 下拉框:父亲 母亲 -->
       <!-- 文本框   名字  身份证  -->
       <!-- 确认添加按钮 -->
       <mt-radio
        title=" 请选择家人身份"
        v-model="form.relation"
        :options="options">
      </mt-radio>

      <mt-field label="名字" placeholder="请输入名字" v-model="form.tname"></mt-field>
      <mt-field label="身份证" placeholder="请输入身份证" type="id" v-model="form.identity"></mt-field>

      <div class="confirmButton">
        <mt-button class="but" type="plain" size="large" @click="toAdd">确认添加</mt-button>
      </div>
  </div>
</template>

<script>
import { Toast } from 'mint-ui'
export default {
  data () {
    return {
      options: [{
        label: '爸爸',
        value: '1'
      },
      {
        label: '妈妈',
        value: '2'
      },
      {
        label: '其他家属',
        value: '3'
      }
      ],
      form: {
        user_id: this.$store.getters['user/id'],
        relation: '',
        tname: '',
        identity: ''
      }

    }
  },
  methods: {
    okk () {
      this.$router.go(-1)// 返回上一层
    },
    toAdd () {
      console.log(this.form)
      this.$http.post('/addUserInfo', this.form).then(res => {
        if (res.data.code === '1') {
          Toast({
            message: '关联成功',
            position: 'middle',
            duration: 3000
          })
          this.$router.go(-1)// 返回上一层
        } else {
          Toast({
            message: '关联失败',
            position: 'middle',
            duration: 3000
          })
        }
      })
    }
  }

}
</script>

<style scoped>
.header {
  height: 1.5rem;
  width: 100%;
  background:#96D596;
}
.text{
  padding-top:4%;
  font-size:0.55rem;
  color:white
}
.iconfont{
  font-size: 0.55rem;
}
.confirmButton{
  display: flex;
  justify-content: center;
  width:90%;
  margin: 0.5rem;
  background: #96D596;
  color:azure
}
.confirmButton .but{
  background: #96D596;
}
</style>
